<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="info">
      <van-image
        class="myimg"
        width="90"
        height="90"
        :src="userInfo.photo"
        round
        fit="cover"
      />
      <div class="text">
        <div class="name">{{ userInfo.name }}</div>
        <span class="birth">{{ userInfo.birthday }}</span>
      </div>
    </div>

    <!-- 我的收藏 -->
    <van-grid class="mygrid" :column-num="3" :border="false" icon-size="24px">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>

    <!-- 其他信息 -->
    <van-cell-group>
      <van-cell is-link icon="edit" title="编辑资料" to="/my/edit" />
      <van-cell
        @click="$router.push('/my/xiaozhi')"
        is-link
        icon="chat-o"
        title="小智同学"
      />
      <van-cell is-link icon="setting-o" title="系统设置" />
      <van-cell @click="logout" is-link icon="warning-o" title="退出登录" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // userInfo: {},
    };
  },

  methods: {
    logout() {
      this.$store.commit("logout");
      this.$router.push("/login");
      this.$toast.success("退出登录成功");
    },
  },

  computed: {
    userInfo: function () {
      return this.$store.state.userInfo;
    },
  },

  created() {
    // const res = await getUserInforAPI(this.$store.state.token.token);
    // this.userInfo = res.data.data;

    // // 保存用户信息VUEX
    // this.$store.commit("setUserInfo", res.data.data);
    this.$store.dispatch("setUserInfo");
  },
};
</script>

<style lang="less">
.my {
  .info {
    height: 120px;
    background-color: #3296fa;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
    .myimg {
      margin: 0 20px;
    }
    .text {
      .name {
        font-weight: 700;
        margin-bottom: 8px;
      }
      .birth {
        background: #fff;
        color: #3296fa;
        font-size: 14px;
      }
    }
  }
  .mygrid {
    .van-icon-newspaper-o {
      color: #3296fa;
    }
    .van-icon-star-o {
      color: red;
    }
    .van-icon-tosend {
      color: orange;
    }
  }
}
</style>